<template>
  <div>
    <div class="title-data">系统设置</div>
    <!-- 卡片 -->
    <el-card style="max-width:100%;">
      <div class="card-header">
        <span style="font-size: 14px;"></span>
        <el-menu class="el-menu-demo" mode="horizontal" style="width: 100%;">
          <el-menu-item index="">账户安全</el-menu-item>
        </el-menu>
      </div>

      <!--  -->
      <div class="content-container" v-show="isShow">
        <div
          style="font-size: 16px; font-weight: bold; border-bottom: 1px solid #ccc;padding-bottom:10px; margin-bottom: 10px;">
          账户安全</div>
        <div class="title">更改密码</div>
        <div class="input-item">
          <div class="from-item">
            <div>当前密码：</div>
            <el-input style="margin-top: 10px;height: 40px;" type="password" />
          </div>
          <div class="from-item">
            <div>新密码：</div>
            <el-input style="margin-top: 10px;height: 40px;" type="newpassword" />
          </div>
          <div class="from-item">
            <div>确认密码：</div>
            <el-input style="margin-top: 10px;height: 40px;" type="okpassword" />
          </div>
          <div class="from-item">
            <el-button type="primary">更新密码</el-button>
          </div>
        </div>

      </div>

      <template #footer style="padding: 20px;">
        <div class="footer-container">
          <el-button type="info">重置设置</el-button>
          <el-button type="primary">保存设置</el-button>
        </div>
      </template>
    </el-card>
  </div>

</template>
<script lang='ts' setup>
import { ref } from 'vue'
const isShow = ref(true);
</script>
<style lang="scss">
.title-data {
  font-size: 21px;
  margin-bottom: 10px;
  font-weight: bold;
}

.footer-container {
  width: 100%;
  text-align: right;
}

.card-header {
  margin-bottom: 20px;
}

.title {
  font-size: 14px;
  margin-bottom: 10px;
}

.from-item {
  margin-bottom: 20px;
  font-size: 14px;

  div {
    // margin-top: 10px;
    // margin-bottom: 10px;

  }

}

.content-container {
  // display: none;
}
</style>
